<template>
	<div>
		<div class="breadcrumb-preview">
			<el-breadcrumb :separator="'Ξ'">
				<el-breadcrumb-item class="item1" to="/"><a>首页</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item2" v-for="(item, index) in breadcrumbItem" :key="index"><a>{{item.name}}</a></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div v-if="centerType" class="back_box">
			<el-button class="backBtn" size="mini" @click="backClick">
				<span class="icon iconfont icon-jiantou33"></span>
				<span class="text">返回</span>
			</el-button>
		</div>
		<div class="list-preview">
			<el-form :inline="true" :model="formSearch" class="list-form-pv">
				<el-form-item class="list-item">
					<div class="lable">名称：</div>
					<el-input v-model="formSearch.name" placeholder="名称" @keydown.enter.native="getList(1, curFenlei)" clearable></el-input>
				</el-form-item>
				<el-button class="list-search-btn" v-if=" true " type="primary" @click="getList(1, curFenlei)">
					<i class="el-icon-search"></i>
					查询
				</el-button>
				<el-button class="list-add-btn" v-if="btnAuth('config','新增')" type="primary" @click="add('/index/configAdd')">
					<i class="el-icon-circle-plus-outline"></i>
					添加
				</el-button>
			</el-form>
			<div class="select2">
				<div class="select2-list" v-for="(item,index) in selectOptionsList" :key="index">
					<div class="label">{{item.name}}：</div>
					<div class="item-body">
						<div class="item" @click="selectClick2(item,-1)" :class="item.check ==-1 ? 'active' : ''">全部</div>
						<div class="item" @click="selectClick2(item,index1)" :class="item.check == index1 ? 'active' : ''" v-for="item1,index1 in item.list" :key="index1">{{item1}}</div>
					</div>
				</div>
			</div>
			<div class="list">
				<!-- 样式三 -->
				<div class="list3 index-pv1">
					<div v-for="(item, index) in dataList" :key="index" @click.stop="toDetail(item)" class="list-item animation-box">
						<div class="img">
						</div>
						<div class="item-info">
							<div>
								<div class="time_item">
									<span class="icon iconfont icon-shijian21"></span>
									<span class="label">发布时间：</span>
									<span class="text">{{item.addtime.split(' ')[0]}}</span>
								</div>
							</div>
							<div class="desc ql-snow ql-editor" v-html="item.url"></div>
						</div>
					</div>
				</div>
			</div>

	
			<el-pagination
				background
				id="pagination"
				class="pagination"
				:pager-count="7"
				:page-size="pageSize"
				prev-text="<"
				next-text=">"
				:hide-on-single-page="false"
				:layout='["prev","pager","next"].join()'
				:total="total"
				:page-sizes="pageSizes"
				@current-change="curChange"
				@size-change="sizeChange"
				@prev-click="prevClick"
				@next-click="nextClick"
				></el-pagination>
		</div>
		<el-dialog title="预览图" :visible.sync="previewVisible" width="50%">
			<img :src="previewImg" alt="" style="width: 100%;">
		</el-dialog>
	</div>
</template>
<script>
	export default {
		//数据集合
		data() {
			return {
				selectIndex2: 0,
				selectOptionsList: [],
				layouts: '',
				swiperIndex: -1,
				baseUrl: '',
				breadcrumbItem: [
					{
						name: '轮播图管理'
					}
				],
				formSearch: {
					name: '',
				},
				fenlei: [],
				feileiColumn: '',
				dataList: [],
				total: 1,
				pageSize: 10,
				pageSizes: [],
				totalPage: 1,
				curFenlei: '全部',
				isPlain: false,
				indexQueryCondition: '',
				timeRange: [],
				centerType:false,
				previewImg: '',
				previewVisible: false,
				sortType: 'id',
				sortOrder: 'desc',
			}
		},
		async created() {
			if(this.$route.query.centerType&&this.$route.query.centerType!=0){
				this.centerType = true
			}
			this.baseUrl = this.$config.baseUrl;
			await this.getFenlei();
			this.getList(1, '全部');
		},
		watch:{
			$route(newValue){
				this.getList(1, newValue.query.homeFenlei);
			}
		},
		//方法集合
		methods: {
			selectClick2(row,index) {
				row.check = index
				if(index == -1){
					this.formSearch[row.tableName] = ''
				}else {
					this.formSearch[row.tableName] = row.list[index]
				}
				this.getList()
			},
			add(path) {
				let query = {}
				if(this.centerType){
					query.centerType = 1
				}
				this.$router.push({path: path,query:query});
			},
			async getFenlei() {
			},
			getList(page, fenlei, ref = '') {
				let params = {
					page,
					limit: this.pageSize,
				};
				let searchWhere = {};
				if (this.formSearch.name != '') searchWhere.name = '%' + this.formSearch.name + '%';
				let user = JSON.parse(localStorage.getItem('sessionForm'))
				if (this.sortType) searchWhere.sort = this.sortType
				if (this.sortOrder) searchWhere.order = this.sortOrder
				this.$http.get(`config/${this.centerType?'page':'list'}`, {params: Object.assign(params, searchWhere)}).then(res => {
					if (res.data.code == 0) {
						this.dataList = res.data.data.list;
						this.total = Number(res.data.data.total);
						this.pageSize = Number(res.data.data.pageSize);
						this.totalPage = res.data.data.totalPage;
						if(this.pageSizes.length==0){
							this.pageSizes = [this.pageSize, this.pageSize*2, this.pageSize*3, this.pageSize*5];
						}
					}
				});
			},
			sortClick(type){
				if(this.sortType==type){
					if(this.sortOrder == 'desc'){
						this.sortOrder = 'asc'
					}else{
						this.sortOrder = 'desc'
					}
				}else{
					this.sortType = type
					this.sortOrder = 'desc'
				}
				this.getList(1, '全部')
			},
			curChange(page) {
				this.getList(page);
			},
			prevClick(page) {
				this.getList(page);
			},
			sizeChange(size){
				this.pageSize = size
				this.getList(1);
			},
			nextClick(page) {
				this.getList(page);
			},
			imgPreView(url){
				this.previewImg = url
				this.previewVisible = true
			},
			toDetail(item) {
				let params = {
					id: item.id
				}
				if(this.centerType){
					params.centerType = 1
				}
				this.$router.push({path: '/index/configDetail', query: params});
			},
			btnAuth(tableName,key){
				if(this.centerType){
					return this.isBackAuth(tableName,key)
				}else{
					return this.isAuth(tableName,key)
				}
			},
			backClick() {
				this.$router.push({path: '/index/center'});
			},
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.list-preview {
		padding: 0 16%;
		margin: 10px auto;
		background: none;
		display: flex;
		width: 100%;
		align-items: flex-start;
		position: relative;
		flex-wrap: wrap;
		.list-form-pv {
			padding: 10px;
			background: none;
			display: flex;
			width: 100%;
			align-items: center;
			flex-wrap: wrap;
			height: auto;
			order: 1;
			.list-item {
				margin: 0 5px 10px;
				/deep/.el-form-item__content {
					display: flex;
				}
				.lable {
					padding: 0 0px;
					color: #a4b3f6;
					white-space: nowrap;
					display: inline-block;
					width: auto;
					line-height: 42px;
				}
				.el-input {
					width: calc(100% - 80px);
				}
				.datetimerange {
					border: 1px solid #a4b3f6;
					border-radius: 0;
					padding: 3px 10px;
					outline: none;
					background: #fff;
					width: 100%;
					justify-content: center;
				}
				.el-input /deep/ .el-input__inner {
					border: 1px solid #a4b3f6;
					border-radius: 0;
					padding: 0 10px;
					margin: 0;
					outline: none;
					color: #000;
					width: 100%;
					font-size: 14px;
					line-height: 42px;
					height: 42px;
				}
				.el-select {
					width: 100%;
				}
				.el-select /deep/ .el-input__inner {
				}
				.el-date-editor {
					width: calc(100% - 80px);
				}
				.el-date-editor /deep/ .el-input__inner {
					border: 1px solid #a4b3f6;
					border-radius: 0;
					padding: 0 30px;
					margin: 0;
					outline: none;
					color: #333;
					width: 100%;
					font-size: 14px;
					line-height: 42px;
					height: 42px;
				}
			}
			.list-search-btn {
				cursor: pointer;
				border: 0;
				border-radius: 0;
				padding: 0px 15px;
				margin: 0 5px 10px 0;
				outline: none;
				color: #fff;
				background: #a4b3f6;
				width: auto;
				font-size: 14px;
				line-height: 42px;
				height: 42px;
				i {
					margin: 0 10px 0 0;
					color: #fff;
					font-size: 14px;
				}
			}
			.list-add-btn {
				cursor: pointer;
				border: 0;
				border-radius: 0;
				padding: 0px 15px;
				margin: 0 5px 10px 0;
				outline: none;
				color: #fff;
				background: #6c84ed;
				width: auto;
				font-size: 14px;
				line-height: 42px;
				height: 42px;
				i {
					margin: 0 10px 0 0;
					color: #fff;
					font-size: 14px;
				}
			}
		}
		.select2 {
			border-radius: 10px;
			padding: 10px 20px 20px;
			background: #6c84ed;
			width: 100%;
			height: auto;
			order: 1;
			.select2-list {
				padding: 10px 0;
				margin: 0;
				background: none;
				display: flex;
				width: 100%;
				border-color: #fff;
				border-width: 0 0 1px;
				align-items: center;
				position: relative;
				border-style: solid;
				height: auto;
				.label {
					padding: 0 5px;
					color: #fff;
					display: inline-block;
					width: 100px;
					font-size: 14px;
					line-height: 32px;
				}
				.item-body {
					display: flex;
					width: 100%;
					flex-wrap: wrap;
					height: auto;
					.item {
						cursor: pointer;
						border-radius: 0;
						padding: 0 10px;
						margin: 0 5px;
						color: #fff;
						background: none;
						font-size: 14px;
						line-height: 25px;
					}
					.item:hover {
						color: #fff;
						background: #a4b3f6;
					}
					.item.active {
						color: #fff;
						background: #a4b3f6;
					}
				}
			}
		}
		.sort_view {
			border-radius: 10px;
			padding: 10px;
			margin: 0;
			background: #a4b3f6;
			display: flex;
			width: 100%;
			justify-content: center;
			order: 2;
			.click-sort-btn {
				border: 0;
				border-radius: 0;
				padding: 0;
				margin: 0 10px;
				background: none;
				.icon {
					margin: 0 5px 0 0;
					color: #fff;
					font-size: 14px;
					line-height: 30px;
				}
				.text {
					color: #fff;
					font-size: 14px;
					line-height: 30px;
				}
			}
		}
		.list {
			margin: 0 0 10px;
			background: #fff;
			flex: 1;
			width: calc(100% - 210px);
			order: 4;
			.index-pv1 .animation-box {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				z-index: initial;
			}
				
			.index-pv1 .animation-box:hover {
				transform: rotate(0) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
				z-index: 1;
			}
				
			.index-pv1 .animation-box img {
				transform: rotate(0deg) scale(1) skew(0deg, 0deg) translate3d(0px, 0px, 0px);
			}
			
			.index-pv1 .animation-box img:hover {
				transform: rotate(0) scale(0.9) skew(2deg, -2deg) translate3d(0px, 0px, 0px);
				-webkit-perspective: 1000px;
				perspective: 1000px;
				transition: 0.3s;
			}
			.list3 {
				padding: 0;
				background: #fff;
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				height: auto;
				.list-item {
					border-radius: 10px;
					padding: 10px;
					margin: 10px;
					background: #f5f5f5;
					display: flex;
					width: 100%;
					font-size: 0;
					position: relative;
					height: auto;
					.img {
						border: 2px solid #6c84ed;
						padding: 10px;
						overflow: hidden;
						width: 45%;
						height: 200px;
						.image {
							object-fit: cover;
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					.item-info {
						padding: 0 10px;
						overflow: hidden;
						flex: 1;
						display: flex;
						height: auto;
						.name {
							padding: 0 10px;
							overflow: hidden;
							color: #000;
							white-space: nowrap;
							width: 100%;
							font-size: 15px;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							line-height: 30px;
							text-overflow: ellipsis;
							border-style: solid;
							order: 1;
						}
						.price {
							padding: 0 10px;
							color: #C13800;
							width: 100%;
							font-size: 14px;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							line-height: 30px;
							border-style: solid;
						}
						.time_item {
							padding: 0 10px;
							display: none;
							width: 100%;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							border-style: solid;
							order: 7;
							.icon {
								margin: 0 5px 0 0;
								color: #788DD0;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #788DD0;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.publisher_item {
							padding: 0 10px;
							width: 100%;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							border-style: solid;
							order: 5;
							.icon {
								margin: 0 5px 0 0;
								color: #9BD5DE;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #9BD5DE;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.like_item {
							padding: 0 10px;
							width: 100%;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							border-style: solid;
							order: 2;
							.icon {
								margin: 0 5px 0 0;
								color: #FFC5F5;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #FFC5F5;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.collect_item {
							padding: 0 10px;
							width: 100%;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							border-style: solid;
							order: 3;
							.icon {
								margin: 0 5px 0 0;
								color: #F2DA67;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #F2DA67;
								font-size: 14px;
								line-height: 25px;
							}
						}
						.view_item {
							padding: 0 10px;
							width: 100%;
							border-color: #6c84ed;
							border-width: 0 0 1px 0;
							border-style: solid;
							order: 4;
							.icon {
								margin: 0 5px 0 0;
								color: #A5BCD8;
								font-size: 14px;
								line-height: 25px;
							}
							.label {
								color: #666;
								display: none;
								font-size: 12px;
								line-height: 1.5;
							}
							.text {
								color: #A5BCD8;
								font-size: 14px;
								line-height: 25px;
							}
						}
					}
					.desc {
						padding: 10px;
						color: #666;
						flex: 1;
						font-size: 16px;
						line-height: 1.5;
					}
				}
				.list-item:hover {
					background: #6c84ed;
					.item-info {
						.name {
							color: #fff;
						}
						.price {
							color: #fff;
						}
						.time_item {
							.icon {
								color: #788DD0;
							}
							.label {
							}
							.text {
								color: #788DD0;
							}
						}
						.publisher_item {
							.icon {
								color: #9BD5DE;
							}
							.label {
							}
							.text {
								color: #9BD5DE;
							}
						}
						.like_item {
							.icon {
								color: #FFC5F5;
							}
							.label {
							}
							.text {
								color: #FFC5F5;
							}
						}
						.collect_item {
							.icon {
								color: #F2DA67;
							}
							.label {
							}
							.text {
								color: #F2DA67;
							}
						}
						.view_item {
							.icon {
								color: #A5BCD8;
							}
							.label {
							}
							.text {
								color: #A5BCD8;
							}
						}
					}
					.desc {
						color: #fff;
					}
				}
			}
		}
	}
</style>
